<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/suggest/suggest.js" ></script>
 
<div id="suggestDemo">
	<div title='API' tabid='tab1'>
		    <div>
		    	<h2>$.fn.ccaySuggest(ops)<br>
					</h2>
		    	<h3>作用：使某个文本框具有联想效果</h3>
		    	<form class="init ccay-form">
		    		<br/> 
		    		<H3>ops属性设置如下:</H3>
		    		<div class="ccay-form-body"><ul></ul></div>
					<div class="ccay-form-custom">
		    			<ul>
		    			     <li class="ccay-form-row">
							        <samp class="i18n" i18nKey="基础属性设置"></samp>
							        <span class='ccay-form-input'>
								        <div class="ccay-form-body"><ul></ul></div>
										<div class="ccay-form-custom">
										  <ul>
										      <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="属性"></samp>
											 	<span class='ccay-form-input'>说明</span>
											  </li>	
											  <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="url"></samp>
											 	<span class='ccay-form-input'>是数据服务的url， 如果后台请求的数据服务支持带参数，也可以写成 services/ccay/lookup/classify/list/{0} .这种方式。查询的时候，框架
	会自动将当前的联想值传如url中进行模糊匹配查询。（后台需要这中类型的服务接口，让其支持模糊查询）</span>
											  </li>	
											  <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="queryParam"></samp>
											 	<span class='ccay-form-input'>如果后台服务不是通过pathParam 接受，而是queryParam方式接受参数，可以通过这种方式传递参数，并让后台接受，这种比较灵活，可以复杂参数</span>
											  </li>	
											  <li class="ccay-form-row">
										        <samp>fieldMapper</samp>
												<span class="ccay-form-input">
													 显示在下拉列表的字段名称，与列头显示名
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>valueField</samp>
												<span class="ccay-form-input">
													 实际值，联想框保存的实际value
												</span>
											</li>	
											<li class="ccay-form-row">
										        <samp>displayField </samp>
												<span class="ccay-form-input">
													 显示值，显示在联想框文本框中
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>multi</samp>
												<span class="ccay-form-input">
													是否允许多项联想
												</span>
											</li>	
											<li class="ccay-form-row">
										        <samp>delay</samp>
												<span class="ccay-form-input">
													 延迟过滤的时间
												</span>
											</li>	
											<li class="ccay-form-row">
										        <samp>suggestLength</samp>
												<span class="ccay-form-input">
													输入字符的长度限制,进行联想
												</span>
											</li>	
											<li class="ccay-form-row">
										        <samp>suggestNum</samp>
												<span class="ccay-form-input">
													联想的数据数，在url中预留${suggestNum}可动态匹配
												</span>
											</li>	
											<li class="ccay-form-row">
										        <samp>placeholder</samp>
												<span class="ccay-form-input">
													{String}设置提示信息
												</span>
											</li>	
											
											<li class="ccay-form-row">
										        <samp>historySupport</samp>
												<span class="ccay-form-input">
													{Boolean}设置不支持历史记录，默认为true.
												</span>
											</li>
											
											<li class="ccay-form-row">
										        <samp>defaultSelect </samp>
												<span class="ccay-form-input">
													{Boolean}Sp7新加属性，为false 时不默认选中第一条
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>dedupLication </samp>
												<span class="ccay-form-input">
													{Boolean}Sp8新加属性，多选时有效，是否去重复。
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp> historySupport</samp>
												<span class="ccay-form-input">
													{Boolean}是否支持历史记录。默认historySupport：true
												</span>
											</li>			
											<li class="ccay-form-row">
										        <samp> isFocusOutSelector</samp>
												<span class="ccay-form-input">
													{Boolean}是否失去焦点选择第一条数据。默认isFocusOutSelector:false
												</span>
											</li>												 										 
										 </ul>
								       </div>
							      </span>
						     </li>
						      <li class="ccay-form-row">
							        <samp class="i18n" i18nKey="ajax请求相关设置"></samp>
							        <span class='ccay-form-input'>
							            <div class="ccay-form-body"><ul></ul></div>
										<div class="ccay-form-custom">
										  <ul>
										  <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="属性"></samp>
											 	<span class='ccay-form-input'>说明</span>
											  </li>	
										  	<li class="ccay-form-row">
										        <samp>defaultFilter：null </samp>
												<span class="ccay-form-input">
													设置默认过滤
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>ajax: null </samp>
												<span class="ccay-form-input">
													ajax设置
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>ajax:{ url: null, 
															data: null,
															beforeRequest:null, 
															success:null }
												   </samp>
												<span class="ccay-form-input">
													url:请求的url<br>
													data:请求发送的参数<br>
													beforeRequest:请求之前执行的方法<br>
													success：请求成功之后执行的方法
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>getTextAjax:null </samp>
												<span class="ccay-form-input">
													根据初始值回写text的ajax设置;一般用于多选
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>initInput:true</samp>
												<span class="ccay-form-input">
													延迟加载方式，当点击input时才会重新的去查询
												</span>
											</li>				
										  </ul>
								       </div>
							      </span>
						     </li>
						      <li class="ccay-form-row">
							        <samp class="i18n" i18nKey="自定义模板 & 样式设置"></samp>
							        <span class='ccay-form-input'>
							            <div class="ccay-form-body"><ul></ul></div>
										<div class="ccay-form-custom">
										  <ul>
										  <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="属性"></samp>
											 	<span class='ccay-form-input'>说明</span>
											  </li>	
										  	<li class="ccay-form-row">
										        <samp>cssname </samp>
												<span class="ccay-form-input">
													自定义样式名
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>panelBegin</samp>
												<span class="ccay-form-input">
													自定义开始模板
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>item</samp>
												<span class="ccay-form-input">
													自定义行项模式
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>panelEnd </samp>
												<span class="ccay-form-input">
													自定义结束模板
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>itemClass</samp>
												<span class="ccay-form-input">
													行的标示样式
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>preSelected</samp>
												<span class="ccay-form-input">
													预选择的样式
												</span>
											</li>	
											<li class="ccay-form-row">
										        <samp>css</samp>
												<span class="ccay-form-input">
													下拉菜单的位置偏移量
												</span>
											</li>	
											<li class="ccay-form-row">
										        <samp>minWidth</samp>
												<span class="ccay-form-input">
													下拉菜单的最小宽度
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>maxWidth</samp>
												<span class="ccay-form-input">
													下拉菜单的最大宽度
												</span>
											</li>							
										  </ul>
								       </div>
							      </span>
						     </li>
						     <li class="ccay-form-row">
							        <samp class="i18n" i18nKey="高级设置"></samp>
							        <span class='ccay-form-input'>
							            <div class="ccay-form-body"><ul></ul></div>
										<div class="ccay-form-custom">
										  <ul>
										  <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="属性"></samp>
											 	<span class='ccay-form-input'>说明</span>
											  </li>
											  <li class="ccay-form-row">
											        <samp>multiSplit </samp>
													<span class="ccay-form-input">
														多选文本分隔符
													</span>
												</li>
												<li class="ccay-form-row">
											        <samp>valueSplit</samp>
													<span class="ccay-form-input">
														多选值分割符
													</span>
												</li>
											   </ul>
								       </div>
							      </span>
						     </li>
						      <li class="ccay-form-row">
							        <samp class="i18n" i18nKey="事件设置"></samp>
							        <span class='ccay-form-input'>
							            <div class="ccay-form-body"><ul></ul></div>
										<div class="ccay-form-custom">
										  <ul>
										  <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="属性"></samp>
											 	<span class='ccay-form-input'>说明</span>
											  </li>
											  		<li class="ccay-form-row">
												        <samp>fnBinded </samp>
														<span class="ccay-form-input">
															绑定选择列表的方法，fnSelected(value, text, item, selector，input)
														</span>
													</li>
													<li class="ccay-form-row">
												        <samp>fnBeforeBinded</samp>
														<span class="ccay-form-input">
															绑定之前的事件，fnBeforeBinded(list,datas,op)，返回false则不回执行内置的绑定方法
														</span>
													</li>
													<li class="ccay-form-row">
												        <samp>fnSelected</samp>
														<span class="ccay-form-input">
															选择项的方法，fnSelected(value, text,oldValue, item, selector);this为input
														</span>
													</li>
													<li class="ccay-form-row">
												        <samp>fnBeforeSelected</samp>
														<span class="ccay-form-input">
															选择之前的事件，fnBeforeSelected(value, text, item, selector)，返回false则不回执行内置的方法和fnSelected，this为input
														</span>
													</li>
													<li class="ccay-form-row">
												        <samp>fnSetTrigger</samp>
														<span class="ccay-form-input">
															设置填出选择触发器的方法,触发对象必须与input在同级
														</span>
													</li>
													<li class="ccay-form-row">
												        <samp>fnKeyEnter</samp>
														<span class="ccay-form-input">
															设置键入Enter的事件
														</span>
													</li>
											   </ul>
								       </div>
							      </span>
						     </li>		
						</ul>
						</div>
			    </form>
		    </div>
		    
	    </div>
    
	<div title='单项选择' tabid='tab2'>
	<form class="init ccay-form">
	<h2>实例一：</h2>	
		    	<div id="openTry" style='padding-left:30px'>
		    		<ul >
		    			<li  class="ccay-form-input">
						   		<input type="text" id="suggest" name="suggest" />
		    			</li>
		    		</ul>
		    	<br><br>
			    <h3>html Code</h3>
				<div class='codeArea'>
					<pre id='html1'>
&lt;form class="init ccay-form">
	&lt;input type="text" id="suggest1" name="suggest1" />
&lt;/form></pre>
				</div>
				<h3>js code</h3>
				<div class='codeArea'>
					<pre id='js1'>
var conf ={
   url: "services/ccay/demo/student/list/page/80/1",
	fieldMapper: {
		name: $i18n("名称"),
		age: $i18n("年龄")
	},
  // queryParam:function(){/*设置查询参数*/
  //    return {"name": $('#suggest1').val()}
  //   },
  displayField:"name",/*显示值，显示在联想框文本框中 */
  valueField:"id",/*实际值，联想框保存的实际value */
  
 };
$("#suggest1").ccaySuggest(conf);/*调用ccaySuggest,初始化联想框*/
	</pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#suggestDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
				</div>
		<!---------------------  -->
		<h2>实例二：</h2>	
		<h2 style="color:red;">设置historySupport:false 的时候不支持历史记录 <p>
		            另外在数据字典里面父节点GlobalParamters中 配置 enable：是否开启用户历史选项记录功能，1 打开、 0 关闭；<p>
		</h2>	
			<br>
		    		<ul >
		    			<li  class="ccay-form-input">
						   		<input type="text" id="suggest12" name="suggest12" />
		    			</li>
		    		</ul>
		    	<br><br>
			    <h3>html Code</h3>
				<div class='codeArea'>
					<pre id='html7'>
&lt;form class="init ccay-form">
	&lt;input type="text" id="suggest8" name="suggest8" />
&lt;/form>
</pre>
				</div>
				<h3>js code</h3>
				<div class='codeArea'>
					<pre id='js7'>
var conf13 ={
   url: "services/ccay/demo/student/list/page/80/1",/*设置访问url*/
   fieldMapper: {/*显示在下拉列表的字段名称和列头显示名*/
      name: $i18n("名称"),
	  age: $i18n("年龄")
     },
  // queryParam:function(){/*设置查询参数*/  
  //    return {"name": $('#suggest1').val()}
  //   },
  displayField:"name",/*显示值，显示在联想框文本框中 */
  valueField:"id",/*实际值，联想框保存的实际value */
  historySupport:false
 };
$("#suggest8").ccaySuggest(conf13);/*调用ccaySuggest,初始化联想框*/
	</pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#suggestDemo',$('#js7').html(),$('#html7').html())">亲自试一试</a>
				</div>
		<!-- ----------------------- -->		
		<h2>实例三：</h2>	
		<h2 style="color:red;">设置isFocusOutSelector:true 的时候失去焦点选择第一条数据<p>
	</h2>	
			<br>
		    		<ul >
		    			<li  class="ccay-form-input">
						   		<input type="text" id="suggest112" name="suggest112" />
		    			</li>
		    		</ul>
		    	<br><br>
			    <h3>html Code</h3>
				<div class='codeArea'>
					<pre id='html77'>
&lt;form class="init ccay-form">
	&lt;input type="text" id="suggest88" name="suggest88" />
&lt;/form>
</pre>
				</div>
				<h3>js code</h3>
				<div class='codeArea'>
					<pre id='js77'>
var conf113 ={
   url: "services/ccay/demo/student/list/page/80/1",/*设置访问url*/
   fieldMapper: {/*显示在下拉列表的字段名称和列头显示名*/
      name: $i18n("名称"),
	  age: $i18n("年龄")
     },
  // queryParam:function(){/*设置查询参数*/  
  //    return {"classifyCode": $('#suggest1').val()}
  //   },
  displayField:"name",/*显示值，显示在联想框文本框中 */
  valueField:"id",/*实际值，联想框保存的实际value */
  isFocusOutSelector:true
 };
$("#suggest88").ccaySuggest(conf113);/*调用ccaySuggest,初始化联想框*/
	</pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#suggestDemo',$('#js77').html(),$('#html77').html())">亲自试一试</a>
				</div>
		<!-- ----------------------- -->		
		
	    </div>
	  </form>
	</div>
	<div title='多项选择' tabid='tab3'>
	<form class="init ccay-form">
			    	<div id="openTry" style='padding-left:30px'>
			    		<ul >
			    			<li  class="ccay-form-input">
							   		<input type="text" id="suggest2" name="suggest2" />
			    			</li>
			    		</ul>
			    	<br><br>
				    <h3>html Code</h3>
					<div class='codeArea'>
						<pre id='html2'>
&lt;form class="init ccay-form">
		&lt;input type="text" id="suggest3" name="suggest3" />
&lt;/form></pre>
					</div>
					<h3>js Code</h3>
					<div class='codeArea'>
					<pre id='js2'>
var conf3 ={
   url: "services/ccay/demo/student/list/page/80/1",/*设置访问url*/
   fieldMapper: {/*显示在下拉列表的字段名称和列头显示名*/
     name: $i18n("名称"),
     age: $i18n("年龄")
     },
   multi :true, /*是否允许多项联想 */ 
   displayField:"name",/*显示值，显示在联想框文本框中 */
   valueField:"id",/*实际值，联想框保存的实际value */
   getTextAjax:{type:"GET",url:"",setAjax:function(ajax,ui){/*根据初始值回写text的ajax设置;一般用于多选 */
            	ajax.url="services/xxx/{0}".formatValue(ajax.data[0]);
      } 
   }
};
$("#suggest3").ccaySuggest(conf3);/*调用ccaySuggest,初始化联想框*/
	</pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#suggestDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
				</div>
				</div>
			</form>
	    </div>
	<div title='联动' >
	<form class="init ccay-form">
		<div  style='padding-left:30px'>
			    	   <form class="ccay-form">
			    	      <div class="ccay-form-body">
			    		  <ul>
			    			 <li class="ccay-form-row ccay-form-longcell">
							 	<samp>触发</samp>
							 	<span class='ccay-form-input'>
							 		<input id='suggest_trigger1' type="text" />
							 	</span>
							 </li> 
							  <li class="ccay-form-row ccay-form-longcell">
							 	<samp>联动</samp>
							 	<span class='ccay-form-input'>
							 		<input id='suggest_link1' type="text" />
							 	</span>
							 </li>
			    		   </ul>
			    		   </div>
			    		</form>
			    	<br><br>
				    <h3>html Code</h3>
					<div class='codeArea'>
						<pre id='html3'>
&lt;form class="init ccay-form">
		&lt;input id='suggest_trigger' type="text" />
		&lt;input id='suggest_link' type="text" />
&lt;/form>
						</pre>
					</div>
					<h3>js Code</h3>
					<div class='codeArea'>
					<pre id='js3'>
// 第一级联想框					
$('#suggest_trigger').ccaySuggest({
	valueField:"provinceId",
	displayField:'provinceName',
	fieldMapper: {
       provinceName: $i18n("省份")
    },
	queryParam:function(){
	  return {"provinceName":$('#suggest_trigger').val()}
	},
	url:"services/ccay/demo/address/listProvinces/page/80/1"
});

// 第二级联想框	    
$('#suggest_link').ccaySuggest({
	valueField:"cityId",
	displayField:'cityName',
	fieldMapper: {
       cityName: $i18n("城市")
    },
    queryParam:function(){
	   return {"cityName":$('#suggest_link').val()}
    },
	ajax:{
   	 	url:"services/ccay/demo/address/listCities/page/80/1?${connect}"
    },
    connector:[
 				{target:"#suggest_trigger",paramName:"provinceId",defaultValue:""}
	]
});
	</pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#suggestDemo',$('#js3').html(),$('#html3').html())">亲自试一试</a>
				</div>
				</div>
		</form>
	</div>
	<div title='自定义模板 & 样式设置 联想框' tabid='tab4'>
	<form class="init ccay-form">
				<h4><span>效果展示</span></h4>
			    	<div id="openTry" style='padding-left:30px'>
			    		<ul >
			    			<li  class="ccay-form-input">
							   		<input id='sgt' filed="" type="text" value='10:北京市' />
						            <input type="button" value="get value" onclick="alert($('#sgt').ccayGetValue());" />
						            <input type="button" value="set value" onclick="$('#sgtDemo').manager().setValue('10','10:北京市');" />
			    			</li>
			    		</ul>
			    	<br><br>
			    <h3>html Code</h3>
				<div class='codeArea'>
					<pre id='html5'>
&lt;form class="init ccay-form">
		&lt;input id='sgtDemo' filed="" type="text" value='10:北京市' />
		&lt;input type="button" value="get value" onclick="alert($('#sgtDemo').ccayGetValue());" />
		&lt;input type="button" value="set value" onclick="$('#sgtDemo').manager().setValue('10','10:北京市');" />
&lt;/form>
					</pre>
				</div>
				<h3>js Code</h3>
				<div class='codeArea'>
					<pre id='html4'>
$('#sgtDemo').suggestion({
			item: "&lt;li class='{0}' val='${cityId}'>&lt;span>&lt;font class='list-text'>${cityId}:${cityName}&lt;/font> - ${provinceId}&lt;/span>&lt;/li>",
			defaultFilter:'%',
			suggestNum:20,
			ajax:{
		   	 	url:"services/ccay/demo/address/listCities/page/${suggestNum}/1?cityName={0}"
		    }});										
		    </pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#suggestDemo',$('#html4').html(),$('#html5').html())">亲自试一试</a>
				</div>
				</div>
			 </form>
	    </div>
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
  <form class="init ccay-form">
    <div class="ccay-form-body">
    <ul>
    </ul>
</div>     
<div class="ccay-form-custom">
    <ul>                     
        <li class="ccay-form-row">
            <samp><h3>问题</h3></samp>
           <span class="ccay-form-input">
               <h3>解决方案</h3>
           </span>
        </li>
        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole 
        <li class="ccay-form-row">
                          <samp class="i18n" i18nKey=""></samp>                          
                         <span class="ccay-form-input"></span>
        </li>  -->
    </ul>
</div>
  </form>                    
</div>  
</div>	 